<template>
  <el-form
    ref="form"
    :model="deviceProp"
    label-width="auto"
    class="flex flex-wrap"
  >
    <el-form-item :label="$t('INPUT_PORT_NUMBER')" class="w-50">
      <el-input :value="deviceProp.split.inNum" readonly />
    </el-form-item>
    <el-form-item
      :label="$t('OUTPUT_PORT_NUMBER')"
      class="w-50"
      prop="split.outNum"
      :rules="[
        {
          required: true,
          message: $t('ENTER_NAME', { msg: $t('OUTPUT_PORT_NUMBER') }),
          trigger: 'blur'
        },
        { pattern: /(^[0-9]\d*$)/, message: $t('ONLY_INIT'), trigger: ['blur', 'change'] },
        { validator: validatePort, trigger: ['blur', 'change'] },
      ]"
    >
      <el-input
        v-model="deviceProp.split.outNum"
      />
    </el-form-item>
  </el-form>
</template>

<script>
  export default {
    props: {
      deviceProp: {
        type: Object,
        default: () => {}
      }
    },
    methods: {
      validatePort(rule, value, callback) {
        if (Number(value) > 128) {
          callback(
            new Error(
              this.$t('PORT_CAPACITY_VALID', {
                msg1: this.$t('OUTPUT_PORT_NUMBER'),
                msg2: 128
              })
            )
          )
        } else if (Number(value) < 1) {
          callback(
            new Error(
              this.$t('PORT_CAPACITY_VALID_MIN', {
                msg1: this.$t('OUTPUT_PORT_NUMBER'),
                msg2: 1
              })
            )
          )
        } else {
          callback()
        }
      }
    }
  }
</script>

<style lang="scss">
.flex {
  .split-number .el-input__inner {
    text-align: left;
  }
}

</style>

